
<template>
  <div ref="echart" style="width: 100%; height: 100%"></div>
</template>
  
<script>
import * as echarts from 'echarts'

export default {
  props: {

    timelyData:{
      type: Object,
        default: () => {}
    }
  },
  data() {
    return {
      options: {
        color: ['blue', 'pink'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' }
            ]
          }
        ]
      },
      optionTwo: {
        backgroundColor: '#fff',
        color:['#5b8ff9','#f0f2f5'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              borderWidth: 0, //设置border的宽度有多大
              borderColor: '#fff'
            },
            data: [

            ],
        
          }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
watch:{
  timelyData(val){
    this.initChart()
  }
},
  methods: {
    initChart() {
      this.echart = echarts.init(this.$refs.echart)
      this.optionTwo.series[0].data = []
      this.optionTwo.series[0].data = this.timelyData.data
      this.echart.setOption(this.optionTwo)
    }
  }
}
</script>
